<template>
  <div class="air">
    <div class="air_title">
      <i class="iconfont iconfeiji"></i>
      <span>国内机票</span>
    </div>
    <!-- 表单 -->
    <div class="air_form_wrap">
      <div class="air_form">
        <AirForm />
      </div>
      <div class="air_form_banner">
        <img src="http://157.122.54.189:9093/images/pic_sale.jpeg" alt="" />
      </div>
    </div>
    <!-- 出行保证 -->
    <div class="ensure">
      <div class="ensure_item">
        <i class="iconfont iconweibiaoti-_huabanfuben"></i>
        <span>100%航协认证</span>
      </div>
      <div class="ensure_item">
        <i class="iconfont iconbaozheng"></i>
        <span>出行保证</span>
      </div>
      <div class="ensure_item">
        <i class="iconfont icondianhua"></i>
        <span>7x24小时服务</span>
      </div>
    </div>

    <div class="sales">
      <!-- 特价机票 -->
      <div class="tejia_title">
        <i class="iconfont icontejiajipiao"></i>
        <span>特价机票</span>
      </div>
      <div class="sales_content">
        <div class="sales_img" v-for="(item, index) in sales" :key="index" @click="airList(item)">
          <img :src="$axios.defaults.baseURL + item.cover" alt="" />
          <div class="sales_item_info">
            <span>{{ item.departCity }}-{{ item.destCity }}</span>
            <span>￥{{ item.price }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sales: [],
    };
  },
  async mounted() {
    const res = await this.$axios.get("/airs/sale");
    //  console.log(res);
    this.sales = res.data;
  },
  methods:{
    airList({price,cover,...info}){
      console.log(info);
      this.$router.push({path:"/air/flights",query:info})
    }
  }
};
</script>

<style lang="less" scoped>
.air {
  width: 1000px;
  margin: 0 auto;
  .air_title {
    height: 55px;
    display: flex;
    align-items: center;
    color: orange;
    font-size: 20px;
    .iconfeiji {
      font-size: 20px;
      margin-right: 10px;
    }
  }
  .air_form_wrap {
    display: flex;
    justify-content: space-between;
    .air_form {
      width: 360px;
    }

    .air_form_banner {
      width: 620px;
      img {
        display: block;
      }
    }
  }
  .ensure {
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    margin: 20px 0;
    height: 55px;
    font-size: 18px;
    display: flex;

    .ensure_item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 1px solid #999;
      &:last-child {
        border-right: none;
      }
      .iconfont {
        font-size: 24px;
        color: #409efd;
        margin-right: 5px;
      }
      &:nth-child(2) {
        i {
          color: green;
        }
      }
    }
  }
  .sales {
    .tejia_title {
      height: 50px;
      display: flex;
      align-items: center;
      font-size: 24px;
      color: #40b8ff;
      .icontejiajipiao {
        font-size: 24px;
      }
    }
    .sales_content {
      display: flex;
      height: 180px;
      border: 1px solid #ccc;
      justify-content:space-evenly;
      align-items: center;
      margin-bottom: 50px;
      .sales_img {
        position: relative;
        cursor: pointer;
        img {
          width: 225px;
          height: 150px;
          display: block;
        }

        .sales_item_info {
          position: absolute;
          bottom: 0;
          left: 0;
          display: flex;
          justify-content: space-between;
          height: 30px;
          align-items: center;
          padding: 0 15px;
          color:#fff;
          background-color: rgba(0, 0, 0, 0.8);
          width: 100%;
        }
      }
    }
  }
}
</style>